<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="nickname">
                <el-input v-model="searchForm.nickname" clearable placeholder="用户姓名"></el-input>
            </el-form-item>

            <el-form-item prop="telephone">
                <el-input v-model="searchForm.telephone" clearable placeholder="用户手机号"></el-input>
            </el-form-item>
            <el-form-item prop="gender">
              <el-select filterable clearable v-model="searchForm.gender" placeholder="性别">
                <el-option :label="item.name" :value="item.id" v-for="item in genderList"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="realname">
              <el-select filterable clearable v-model="searchForm.realname" placeholder="实名状态">
                <el-option :label="item.name" :value="item.id" v-for="item in statusList"></el-option>
              </el-select>
            </el-form-item>
           <el-form-item prop="regTime">
             <el-date-picker v-model="regTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="注册开始日期" end-placeholder="注册结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
           <el-form-item prop="blockTime">
             <el-date-picker v-model="blockTime" type="daterange" align="right" unlink-panels range-separator="至"
               :start-placeholder="currentPath=='blackList'?'拉黑开始日期':'拉白开始日期'" :end-placeholder="currentPath=='blackList'?'拉黑结束日期':'拉白结束日期'" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSeach">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.level" size="small" @change="handleSearch()">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.levelId" v-for="item in levelList">{{item.name}}</el-radio-button>
            </el-radio-group>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <!-- <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight" v-loading="loading"  stripe>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" label="编号" v-if="!hideTableColumn.includes('number')" width="80px"></el-table-column>
            <el-table-column prop="name" label="用户头像" v-if="!hideTableColumn.includes('img')">
              <template #default="scope">
                 <el-image :src="scope.row.userface" fit="fill" v-image-preview="scope.row.userface" class="img"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="customerId" label="用户ID" v-if="!hideTableColumn.includes('name')"></el-table-column>
            <el-table-column prop="nickname" label="用户名" v-if="!hideTableColumn.includes('idCard')"></el-table-column>
            <el-table-column prop="telephone" label="手机号" v-if="!hideTableColumn.includes('openingBank')"></el-table-column>
            <el-table-column prop="levelName" label="会员等级" v-if="!hideTableColumn.includes('bankAccount')"></el-table-column>
            <el-table-column prop="registerArea" label="注册地区" v-if="!hideTableColumn.includes('bankAccount')"></el-table-column>
            <el-table-column prop="gender" label="性别" v-if="!hideTableColumn.includes('bankAccount')"></el-table-column>
            <el-table-column prop="parentPhone" label="推荐人手机" v-if="!hideTableColumn.includes('bankAccount')"></el-table-column>
            <el-table-column prop="registerTime" label="注册时间" v-if="!hideTableColumn.includes('bankAccount')"></el-table-column>
            <el-table-column prop="realname" label="实名状态" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>

            <el-table-column prop="pullIntoTime" :label="currentPath=='blackList'?'拉黑日期':'拉白日期'" v-if="!hideTableColumn.includes('time')"></el-table-column>
            <el-table-column prop="operator" label="操作人" v-if="!hideTableColumn.includes('level')"></el-table-column>
            <el-table-column prop="name" label="操作" width="140" fixed="right">
              <template #default="scope">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row.id)"
                  >查看</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-delete-solid"
                    @click="handleDelt(scope.row.id)"
                    v-has="'user:blackList:delt'"
                  >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 详情 -->
    <el-dialog title="查看详情" width="600px" v-dialogDrag :visible.sync="viewVisible" @close="viewVisible = false">
      <div class="d-flex userDetail">
        <div class="left flex1">
          <el-form   status-icon  label-position="left" label-width="80px">
             <h2 style="font-weight: bold;">用户信息</h2>
            <el-form-item label="姓名:" prop="pass">
               {{userDetail.nickname}}
             </el-form-item>
             <el-form-item label="头像:" prop="checkPass">
               <el-image :src="userDetail.userface" fit="fill" v-image-preview="userDetail.userface" class="img"></el-image>
             </el-form-item>
             <el-form-item label="姓名:" prop="pass">
                {{userDetail.nickname}}
              </el-form-item>
              <el-form-item label="性别:" prop="pass">
                 {{userDetail.gender}}
              </el-form-item>
              <el-form-item label="手机号:" prop="pass">
                 {{userDetail.telephone}}
              </el-form-item>
              <el-form-item label="会员等级:" prop="pass">
                 {{userDetail.levelName}}
              </el-form-item>
              <el-form-item label="注册时间:" prop="pass">
                 {{userDetail.registerTime}}
              </el-form-item>
              <el-form-item label="注册地址:" prop="pass">
                 {{userDetail.registerArea}}
              </el-form-item>
              <el-form-item label="推荐人:" prop="pass">
                 {{userDetail.parentPhone}}
              </el-form-item>
           </el-form>
        </div>
        <div class="right flex1">
          <el-form   status-icon  label-position="left" label-width="80px">
             <h2 style="font-weight: bold;">管理员信息</h2>
            <el-form-item label="账号:" prop="pass">
               {{userDetail.operator}}
            </el-form-item>
            <el-form-item label="用户状态:" prop="pass">
               {{this.currentPath == 'blackList'?'黑名单':'白名单'}}
            </el-form-item>
            <el-form-item label="操作日期:" prop="pass">
               {{userDetail.registerTime}}
            </el-form-item>
            <el-form-item :label="currentPath == 'blackList'?'拉黑原因':'拉白原因'" prop="pass">
               {{userDetail.reason}}
            </el-form-item>
           </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="deltFn(userDetail.id)" size="small" :loading="btnLoading">删 除</el-button>
        <el-button @click="viewVisible = false" size="small">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getBlackList, getBlackDetail, getWhiteDetail, getWhiteList, delBlackData,delWhiteData
  } from '@/api/getData'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        regTime:[],
        blockTime:[],
        searchForm: {
          nickname:'',
          telephone:'',
          gender:'',
          realname:'',
          level:'',
          pageNum:1,
          pageSize:20,
        },
        levelList:[],
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        statusRow:{},
        statusList: [{
          id: '1',
          name: '已实名'
        }, {
          id: '0',
          name: '未实名'
        }],
        genderList: [{
          id: '1',
          name: '男'
        }, {
          id: '2',
          name: '女'
        }, {
          id: '0',
          name: '未知'
        }],
        dataList:[],
        total: 0,
        currentPath:'',
        viewVisible:false,
        userDetail:{}
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.currentPath = this.$router.currentRoute.path=='/user/blackList'?'blackList':'whiteList';
      this.dataInfo();
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      async handleView(id){
        try {
          this.viewVisible = true;
          let result;
          this.currentPath == 'blackList'?(result = await getBlackDetail({id:id})):(result = await getWhiteDetail({id:id}));
          if (result.code == 200) {
            this.userDetail = result.data;
          } else {
            this.$message.error(result.msg);
          }
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      resetSeach(){
        this.resetForm('searchForm');
        this.regTime = [];
        this.blockTime = [];
        this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.blockTime, 'pullIntoStartTime', 'pullIntoEndTime');
          data = this.addDateRange(this.searchForm, this.regTime, 'registerStartTime', 'registerEndTime');
          this.loading = true;
          let result;
          this.currentPath == 'blackList'?(result = await getBlackList(data)):(result = await getWhiteList(data));
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      getSelect(){
        this.getCategoryDetails({categoryKey:'member_level_category'}).then(res=>{ this.levelList = res.data; })
      },
      handleDelt(id){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deltFn(id)
          }).catch(() => {
              console.log(1);
          });
      },
      async deltFn(id){
        try {
          let result;
          this.currentPath == 'blackList'?(result = await delBlackData({id:id})):(result = await delWhiteData({id:id}));
          if (result.code == '200') {
               this.dataInfo();
               this.$message({
                   message: result.msg,
                   type: 'success'
                 });
               this.viewVisible = false;  
           }else{
              this.$message.error(result.msg);
           }
        } catch (err) {
          console.log(err)
        }
      }

    }
  }
</script>

<style scoped lang="scss">
  .userDetail /deep/ .el-form-item{
    margin-bottom: 5px;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
